<template>
	<view class="container user-addredit">
		<view class="yuan-form">
			<view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">联系人:</view>
				<input class="yuan-input" v-model="formData.name" placeholder="请输入联系人"
					placeholder-class="placeholder-style">
			</view>
			<view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">电话:</view>
				<input class="yuan-input" v-model="formData.phone" type="number" placeholder="请输入联系电话"
					placeholder-class="placeholder-style">
			</view>
			<view class="yuan-form-list" @click="getLocation">
				<view class="yuan-form-label yuan-label-must">地址:</view>
				<view class="yuan-input placeholder-style" v-if="!formData.address">请选择地址</view>
				<view class="yuan-input" v-else>{{formData.address}}</view>
				<text class="right-iconfont iconfont">&#xe636;</text>
			</view>
			<view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">详细地址:</view>
				<input class="yuan-input" v-model="formData.fullAddress" placeholder="请输入详细地址"
					placeholder-class="placeholder-style">
			</view>
			<!-- <view class="yuan-form-list">
				<view class="yuan-form-label">设为默认地址:</view>
				<view class="yuan-input">
					<view class="yuan-bool" :class="formData.isDef&&'yuan-bool-s'" @click="defChange">
						<view class="yuan-bool-next"></view>
					</view>
				</view>

			</view> -->

		</view>
		<view class="yuan-btn btn-success bottom-btn" @click="addSure">提交</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import api from '@/common/api';
	import { hideLoading, showLoading, showToast } from '@/common/util';
	import commonStore from '@/store/commonStore';
	import { onLoad } from "@dcloudio/uni-app"

	const isLoading = ref(false)
	const formData = reactive<any>({
		name: '',
		phone: '',
		address: '',
		fullAddress: ''
	})
	let pageId = ''
	onLoad((options) => {
		pageId = options.id;
	})
	onMounted(async () => {
		if (pageId) {
			getAddrDetail()
		}
	})
	const getAddrDetail = async () => {
		showLoading()
		try {
			const res = await api.getAddrDetail({ id: pageId })
			const data = res.data || {}
			formData.name = data.name
			formData.phone = data.phone
			formData.address = data.address
			formData.fullAddress = data.fullAddress
			formData.isDef = data.defaultFlag === '2'
		} finally {
			hideLoading()
		}
	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}

	const getLocation = () => {
		uni.chooseLocation({
			success: function (res) {
				formData.address = res.address
				// console.log('位置名称：' + res.name);
				// console.log('详细地址：' + res.address);
				// console.log('纬度：' + res.latitude);
				// console.log('经度：' + res.longitude);
			}
		})
	}
	const defChange = () => {
		formData.isDef = !formData.isDef
	}
	const addSure = async () => {
		if (!formData.name) {
			showToast('请输入联系人姓名')
			return
		}
		if (!formData.phone) {
			showToast('请输入联系人电话')
			return
		}
		if (!formData.address) {
			showToast('请选择地址')
			return
		}
		if (!formData.fullAddress) {
			showToast('请输入详细地址')
			return
		}
		showLoading()
		try {
			if (pageId) {
				//有id 修改
				await api.editAddr({ ...formData, defaultFlag: formData.isDef ? '2' : '1', id: pageId })
			} else {
				await api.addAddr({ ...formData, defaultFlag: formData.isDef ? '2' : '1' })
			}

			showToast('编辑成功')
			commonStore.commit('addReload', 'addrList')
			uni.navigateBack()
		} finally {
			hideLoading()
		}


	}
</script>

<style lang="scss">
	.user-addredit {
		padding: 30rpx;

		.yuan-form {
			background-color: #fff;
			box-shadow: 0px 8rpx 10rpx 2rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			padding: 0 20rpx;
		}

		.yuan-bool {
			width: 100rpx;
			box-shadow: 0 0 1px 1px #eee;
			height: 50rpx;
			border-radius: 50rpx;
			display: inline-block;
			position: relative;
			transition: all 0.3s;
		}

		.yuan-bool-next {
			height: 50rpx;
			width: 50rpx;
			border-radius: 50rpx;
			border: solid 1px #eee;
			background-color: #fff;
			left: 0;
			top: 0;
			position: absolute;
			transition: all 0.3s;
		}

		.yuan-bool-s {
			background-color: #56AB2F;

			.yuan-bool-next {
				left: 50rpx;
			}
		}

		.bottom-btn {
			height: 88rpx;
			border-radius: 88rpx;
			margin-top: 150rpx;
			font-size: 32rpx;
		}
	}
</style>